import React , { Component } from "react"
import { images } from "../../../../assets"
import "./index.scss"

const imgTail = window.devicePixelRatio > 2 ? "three-tail" : "two-tail"

interface UserHeadBarProps {

}
interface UserHeadBarState {

}

export class UserHeadBar extends Component <UserHeadBarProps , UserHeadBarState>{
  render(){
    return (
      <div className={`user-head-bar ${imgTail}`}>
        <div className="user-head-info-wrap">
          <div className="user-avatar">
            <img className="user-avatar-img" alt="" src="http://m.ld1121.com/125669346c3c5bc837d91b5b793cecaf.png"/>
            <img className="user-avatar-edit" alt="" src={images.mine.icons.avatarEdit}/>
          </div>
          <div className="user-info">
            <div className="top">
              <span className="user-name">John</span>
              <span className="member-level-mark">
                <span>VIP4</span>
                <i className="to-vipcenter-arrow" ></i>
              </span>
            </div>
            <div className="time-count">这是你成为贝博会员的第N天</div>
        </div>
        </div>
        <img src={images.mine.icons.setting} className="user-setting"  alt=""/>
      </div>
    )
  }
}
